// 切换页面 + 动画效果 	
var mySwiper = new Swiper('.swiper-container', {
	observer: true,
	//	autoplay: {
	//		delay: 10000
	//	},
	on: {
		init: function() {
			swiperAnimateCache(this); //隐藏动画元素 
			swiperAnimate(this); //初始化完成开始动画
		},
		slideChangeTransitionEnd: function() {
			swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
			//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
		}
	}

})


//倒计时
let end = document.querySelector(".end");
let endCenterp = document.querySelector(".endCenter p");

function countdown() {
	var count = 60;
	var time = document.querySelector(".clock");
	let timer = setInterval(() => {
		count--;
		time.innerHTML = count;
		if(count <= 0) {
			clearInterval(timer);
//				setTimeout(()=>{
//				end.style.transform = "translateY(0%)";
//				endCenterp.innerText = "未在指定时间内完成,睚屎啦你";
//				},2000);
		}
	}, 1000);
}

// 延迟处理 判断在两秒后执行
function throttle(fn) {
				var get = true;
				return function() {
					if(!get)
						return;
					get = false;
					setTimeout(() => {
						fn()
						get = true;
					}, 2000)
				}
			}
function ajax(option) {
	var music = new XMLHttpRequest();
	music.open(option.method, option.url);
	music.addEventListener("readystatechange", () => {
		if(music.readyState == 4 && music.status == 200) {
			option.success(music.response);
		}
	})
	music.send(option.data);
}
//  声明区	
let skip = document.querySelector(".skip");
var math = document.querySelector(".math");
let mathOpt = document.querySelectorAll(".math div");
var choice = document.querySelector(".choice");
let personer = document.querySelector(".personer");
let startBtn = document.querySelector(".stratBtn");
let swiper = document.querySelector(".swiper-container");
let audio = document.querySelector("audio");
let share = document.querySelector(".share");
let shareol = document.querySelector(".shareol");

// 获取音乐
ajax({
	url: 'music.json',
	method: 'GET',
	success: musicer,
})

// 渲染音乐名称
function musicer(res) {
	console.log(JSON.parse(res));
	var res = JSON.parse(res);

	// 适配ios
	var preload;
	var mainfest;

	let newData = res.map((e) => {
		return e.audio;
	});
	console.log(newData);

	// 初始化预加载manifest清单
	function setupManifest() {
		mainfest = newData;

	}
	// 预加载函数
	function startPreload() {
		preload = new createjs.LoadQueue(true);
		//注意加载音频文件需要调用如下代码行
		preload.installPlugin(createjs.SOUND);
		//为preloaded添加整个队列变化时展示的进度事件
		preload.addEventListener("progress", handleFileProgress);
		//为preloaded添加当队列完成全部加载后触发事件
		preload.addEventListener("complete", loadComplete);
		//设置最大并发连接数  最大值为10
		preload.setMaxConnections(1);
		preload.loadManifest(mainfest);
	}
	// 当整个队列变化时展示的进度事件的处理函数
	function handleFileProgress(event) {
		console.log(event.loaded);
	}
	// 处理preload添加当队列完成全部加载后触发事件
	function loadComplete() {
		// 设置定时器，当全部加载完毕后让100%停留0.4秒，提高用户体验，不至于让用户感觉不到
		window.setTimeout(() => {
			console.log("全部加载完成");
		}, 400);
	}
	setupManifest();
	startPreload();

	//	随机获取30首歌曲
	res = res.sort(function(a, b) {
		return Math.random() - 0.5;
	});
	res = res.slice(0, 30);
	//	console.log(res);

	//	下标
	let index = 0;
	//	计分
	let grade = 0;

	//	开始按钮事件
	startBtn.addEventListener("click", function() {
		let parent = startBtn.parentElement;
		parent.style.transform = "translateX(-100%)";
		swiper.style.display = "block";
		audio.src = res[index].audio;
		//		页面完全过渡完成后,移除页面,开启倒计时
		setTimeout(() => {
			parent.remove();
			countdown();
		}, 1000);
	});

	// 播放器	
	function loadAudio(src) {
		let audio = document.createElement("audio");
		return new Promise((resolve, reject) => {
			audio.addEventListener("canplay", () => {
				resolve();
			})
			audio.src = src;
		})
	};
	let loader = 0;
	let medal = document.querySelector(".medal");
	let guess = document.querySelector(".guess");
	let guessp = document.querySelector(".guess p");
	let endCenter = document.querySelector(".endCenter");
	let toload = document.querySelector(".toload");
	let medalImg = document.querySelector(".medal img");
	let loadSpan = document.querySelector(".toload span");
	res.forEach((el, index) => {
		loadAudio(el.audio).then(e => {
			loader++;
			loadSpan.innerText = (loader / 30 * 100).toFixed(0) + "%";
			//			加载完成,切换至开始页
			if(loader / 30 == 1) {
				setTimeout(() => {
					toload.style.transform = "translateX(-100%)";
				}, 1000);
				setTimeout(() => {
					toload.remove();
				}, 1500);
				console.log('全部加载完成')
			}
		})
	})


	// 选择框添加点击事件 判断是否选中正确歌曲
	mathOpt.forEach((el, i) => {
		//		渲染第一道题的选项
			el.innerText = res[index].item[i];
		//		添加点击事件
		el.addEventListener("click", function() {
			if(index == 29) {
				//	显示结束页,显示分数等级
				setTimeout(() => {
					end.style.transform = "translateY(0%)";
				}, 1000);
				alert("游戏结束,你的分数是:" + grade);

				guessp.innerText = "你猜中了" + grade + "首";

				endCenterp.innerText = "失敬失敬!十二星座  音斗士你是哪一宫?";

				return
			}
			console.log(grade);
			if(0 <= grade && grade <= 6) {
				medalImg.src = "images/520tupian/qingto.png";
				console.log("你的段位是青铜");
			}
			if(7 <= grade && grade <= 12) {
				medalImg.src = "images/520tupian/baiying.png";
				console.log("你的段位是白银");
			}
			if(13 <= grade && grade <= 18) {
				medalImg.src = "images/520tupian/huangjing.png";
				console.log("你的段位是黄金");
			}
			if(19 <= grade && grade <= 24) {
				medalImg.src = "images/520tupian/bojin.png";
				console.log("你的段位是铂金");
			}
			if(25 <= grade && grade <= 30) {
				medalImg.src = "images/520tupian/zhuanshi.png";
				console.log("你的段位是钻石");
			}

			if(i == res[index].answer) {
				console.log("选中答案，分数+1");
				grade++;
			}

			// 点击滑出分享页	
			share.addEventListener("click", function() {
				shareol.style.transform = "translateX(0)"
			});

			//			console.log(res[index].item);
			// 延迟两秒判断

			function scrollEvent(){
				console.log("延迟两秒");
				index++;
			}
			window.addEventListener("click",throttle(scrollEvent));	
			
			//			替换音频资源
			audio.src = res[index].audio;
			//			选中后更换选项文本内容
			mathOpt.forEach((e, i) => {
				e.innerText = res[index].item[i];
			})
		});
	})
}